<template>
    <el-row style="height: 100%;background-color: #f3f4f9">
      <el-row style="height: 10%;border-bottom-style: solid;border-bottom-color: #e6e6e6;background-color: #ffffff">
        <Header></Header>
      </el-row>
      <el-row :gutter="20" style="height: 90%">
        <el-col :span="4" style="height: 100%;">
          <Navigator></Navigator>
        </el-col>
        <el-col :span="20" style="border-top: 1px solid #2c3e50;padding: 0;height: 100%">
          <el-row>
            <el-col :span="4">
                <h1>管理员功能</h1>
            </el-col>
          </el-row>
          <el-row>
            <el-form>
                <el-row>
                    <el-col :span="20" :offset="2">
                        <el-form-item label="用户地址：">
                            <el-row>
                                <el-col :span="6">
                                    <el-input type="primary" v-model="userAddress"></el-input>
                                </el-col>
                                <el-col :span="2">
                                    <el-button type="primary" @click="queryUserinfo">查询</el-button>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row v-if="formActive">
                    <el-col :span="12" :offset="2">
                        <el-form>
                            <el-form-item label="用户地址:">
                                <el-col :span="10">
                                    {{userForm.address}}
                                </el-col>
                            </el-form-item>
                            <el-form-item label="用户名:">
                                <el-col :span="10">
                                    {{userForm.username}}
                                </el-col>
                               
                            </el-form-item>
                            <el-form-item label="用户昵称:">
                                <el-col :span="10">
                                    {{userForm.nickname}}
                                </el-col>
                                
                            </el-form-item>
                            <el-form-item label="用户余额:">
                                <el-row>
                                    <el-col :span="10">
                                        {{userForm.balance}}
                                    </el-col>
                                    <el-col :span="4">
                                        <el-button type="primary" @click="showDialog">修改</el-button>
                                    </el-col>
                                </el-row>
                                
                            </el-form-item>
                            <el-form-item label="用户权限:">
                                <el-col :span="10">
                                    {{userForm.role}}
                                </el-col>
                                
                            </el-form-item>
                        </el-form>
                    </el-col>
                    
                </el-row>
                
            </el-form>
          </el-row>
        </el-col>
      </el-row>
      <el-dialog title="用户余额修改" :visible.sync="dialogVisible" width="50%">
        <el-row>
            <el-col :span="4">
                修改余额:
            </el-col>
            <el-col :span="12" :offset="1">
                <el-input type="primary" placeholder="请输入余额.." v-model="updateBalance"></el-input>
            </el-col>
        </el-row>
        <el-row style="margin-top:10px">
            <el-button type="primary" @click="updateUserinfo">确认</el-button>
        </el-row>
           
        </el-dialog>
    </el-row>
  
  </template>
  
  <script>
  
  import Header from "@/components/Header";
  import Navigator from "@/components/Navigator";
  
  export default {
    components: {Header, Navigator},
    data(){
      return{
        formActive:0,
        userAddress:"",
        dialogVisible:false,
        userForm: {
            address:'',
            username:'',
            nickname:'',
            balance:0,
            role:"用户"
        },
        updateBalance:""
      }
    },
    mounted() {
  
    },
    methods:{
        queryUserinfo() {
            //加上请求user_info_query
            let loginForm = {
                "address":this.userAddress
            }
            this.axios.post("/user_info_query",loginForm).then((res) => {
                if (res.data.code == 200) {
                    //请求成功
                    this.userForm = res.data.data
                }else {
                    alert(`请求失败，原因为${res.data.data}`)
                }
            })
            this.formActive = 1
        },
        updateUserinfo() {
            //加上请求user_info_query
            let updateForm = {
                "address":this.userForm.address,
                "balance":this.updateBalance
            }
            this.axios.post("/user_balance_update",updateForm).then((res) => {
                if (res.data.code == 200) {
                    //请求成功
                    alert("用户余额修改成功!")
                }else {
                    alert(`请求失败，原因为${res.data.data}`)
                }
            })
        },
        showDialog() {
            this.dialogVisible = true;
        }
    }
  }
  </script>
  
  <style scoped>
  .container{
    height: 100%;
    width: 100%;
    position: fixed;
  }
  .aside{
    background-color: #545c64;
  }
  .main{
    background-color: #fff;
  }
  .form{
    width: 400px;
    margin: 0 auto;
  }
  </style>